import React from 'react';
import PropTypes from 'prop-types';
import { Button, Icon } from '@alifd/next';

const PageHead = ({ title, style, ...props }) => {
  return (
    <div style={{ ...styles.container, ...style }}>
      <h3 style={styles.title}>{title}</h3>
      {props.buttonText ? (
        <Button type="primary" onClick={props.onClick} style={styles.upload}>
          <Icon type="dingdan" size="medium" style={styles.upload.uploadIcon} />
          {props.buttonText}
        </Button>
      ) : null}
    </div>
  );
};

const styles = {
  container: {
    margin: '10px 10px',
    paddingBottom: '10px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    margin: '0',
    padding: '0',
    fontSize: '22px',
    color: 'rgba(0, 0, 0, 0.85)',
    fontWeight: 'bold',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    position: 'relative',
    top: '20px',
    right: '-10px',
    letterSpacing:'1px',
    fontSize:'14px',
    uploadIcon: {    
      cursor: 'pointer',
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  }
};

PageHead.propTypes = {
  title: PropTypes.string.isRequired,
  buttonText: PropTypes.string,
};

PageHead.defaultProps = {
  buttonText: '',
};

export default PageHead;
